<template>
  <div>
    <NstdCheckboxGroup v-model="checkboxGroup1" size="large" :options="cities"></NstdCheckboxGroup>
  </div>
  <div class="demo-button-style">
    <NstdCheckboxGroup v-model="checkboxGroup2" :options="cities1"></NstdCheckboxGroup>
  </div>
  <div class="demo-button-style">
    <NstdCheckboxGroup v-model="checkboxGroup3" size="small" :options="cities2"></NstdCheckboxGroup>
  </div>
  <div class="demo-button-style">
    <NstdCheckboxGroup v-model="checkboxGroup4" size="small" disabled :options="cities1"></NstdCheckboxGroup>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkboxGroup1 = ref([1])
const checkboxGroup2 = ref([1])
const checkboxGroup3 = ref([1])
const checkboxGroup4 = ref([1])
const cities = [
  {
    type: 'checkbox',
    label: 1,
    value: 'Shanghai'
  },
  {
    type: 'checkbox',
    label: 2,
    value: 'Beijing'
  }
]
const cities1 = [
  {
    type: 'button',
    label: 1,
    value: 'Shanghai'
  },
  {
    type: 'button',
    label: 2,
    value: 'Beijing'
  }
]
const cities2 = [
  {
    type: 'button',
    label: 1,
    value: 'Shanghai',
    disabled: true
  },
  {
    type: 'button',
    label: 2,
    value: 'Beijing'
  }
]
</script>

<style scoped>
.demo-button-style {
  margin-top: 24px;
}
</style>
